<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/en.js"></script>
<script type="text/javascript" src="/js/mac/core.js"></script><title>JQuery MagicGrid&nbsp;Document</title>
<meta name="description" content="JQuery MagicGrid Document" />
<meta name="keywords" content="JQuery Grid Plugin Document" />
<link href="/javascript/tabs/css/default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/tabs.js"></script>
<script type="text/javascript">
$(function(){
	$('#docTabs').mac('tabs',{
		items: [{
			code: 'overview',
			title: 'Overview',
			height: 'auto',
			el: $('#overview')
		},{
			code: 'options',
			title: 'Options',
			height: 'auto',
			el: $('#options')
		},{
			code: 'events',
			title: 'Events',
			height: 'auto',
			el: $('#events')
		},{
			code: 'methods',
			title: 'Methods',
			height: 'auto',
			el: $('#methods')
		}]
	}).selectFirst();
});
</script>
</head>
<body>
<style stype="text/css">
#head { height: 60px; background-color: #333; }
#head img { float: left; border: none; }
#head .right { float: right; height: 60px; color: #FFF; text-align: right; }
#head .right a { color: #CCC; font-size: 16px; color: #FFF; }
#head .title {
	color: #F93; float: left; height: 60px; line-height: 60px;
	font-size: 40px; font-family: Impact, 'Comic Sans MS';
}
#head a { color: #F93; text-decoration: underline; }
.hr { height: 12px; background: transparent url(/css/images/nm-b.png) repeat-x; }
</style>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
	data-appid="100443511" data-redirecturi="http://www.boarsoft.com" charset="utf-8" data-callback="true"></script>
<script type="text/javascript">
QC.Login({
	btnId: "qqLoginBtn"	//插入按钮的节点id
}); 
</script>
<div id="head">
	<a href="/"><img src="/css/images/logo_s.png" alt="logo of boarsoft.com" /></a>
	<div class="title"><a href="/">boarsoft.com</a></div>
	<div class="right">
		<div>
			<a href="/public/lang.php?l=en">English</a>
			|
			<a href="/public/lang.php?l=cn">简体中文</a>
			|
			<a href="http://www.jquery.com" target="_blank">JQuery</a>
			|
			<a href="http://www.jqueryui.com" target="_blank">JQuery UI</a>
			|
			<a href="http://code.google.com/p/dynatree/" target="_blank">JQuery Dynatree Plugin</a>
			&nbsp;&nbsp;
		</div>
		<div>
			This site has JQuery, Ext/Sencha Plugins, such as: Grid Combobox Tree Tabs&nbsp;&nbsp;<br/>
			Please use IE7+, FireFox, Chrome&nbsp;&nbsp;
		</div>
		<div class="fr" style="background-color: #333; margin: 8px;">
			<span id="qqLoginBtn"></span>
		</div>
	</div>
</div>
<div class="hr"></div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/">Home</a>
		&gt;
		<a href="/javascript">Javascript</a>
		&gt;
		<a href="/javascript/grid">MagicGrid</a>
		&gt;
		Document	</div>
	<div id="nav_back">
		<a href="/javascript/grid">Demo</a>
		|
		<a href="javascript:history.back()">Back</a>
		|
		<a href="/javascript">Download</a>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div id="docTabs" class="tabs"></div>
<div id="overview">
	MagicGrid is a small and flexible JQuery grid plugin.
	Although it only provide basic grid function, good design model give it great flexibility.
	<p>Basic features:</p>
	<ol>
		<li>adjust row width</li>
		<li>change row order by drag and drop</li>
		<li>load data from local and remote</li>
		<li>row definition by youself (Render)</li>
		<li>succinct code (size of origin code is under 10k, after compress it is under 3k), update easily.</li>
		<li>easy study and use</li>
		<li>easy custom css style</li>
	</ol>
	Just a little more code, you can implement the following functions:
	<ol>
		<li>multiple-row header (at present it provides two-row header)</li>
		<li>order by local or server</li>
		<li>pagination by local and remote</li>
		<li>define the pagination css style by yourself</li>
		<li>row summation</li>
		<li>row extend</li>
		<li>the first row can be locked</li>
	</ol>
</div>
<div id="options">
	<h3><a href="#">sortLocally</a></h3>
	<p>
		Sort data at local or server. default = false.
		<ul>
			<li>true: sort grid data (current page) via js.</li>
			<li>false: just post request params to loadUrl.</li>
		</ul>
	</p>
	<h3><a href="#">headerHeight</a></h3>
	<p>
		Height of grid header set. It is important if you want use multi headers.
		<a href="">demo</a> 
	</p>
	<h3><a href="#">footerHeight</a></h3>
	<p>
		Height of grid footer if you have.
		<a href="/javascript/grid/index.php?code=voucher">demo</a> 
	</p>
	<h3><a href="#">cols</a></h3>
	<p>
		A array of columns set.
		<table>
			<tr>
				<th>Items</th>
				<th>Description</th>
				<th>Note</th>		
			</tr>
			<tr>
				<td>field</td>
				<td>property of record data object</td>
				<td>optional</td>
			</tr>
			<tr>
				<td>title</td>
				<td>column title, it also can be a JS or JQuery element</td>
				<td>optional, <a href="">demo</a></td>
			</tr>
			<tr>
				<td>width</td>
				<td>column width</td>
				<td>must be assigned, unit is px</td>
			</tr>
			<tr>
				<td>header</td>
				<td>JS or JQuery element for custom head</td>
				<td>optional, but it is important for multi headers.<a href="">demo</a></td>
			</tr>
			<tr>
				<td>sizeable</td>
				<td>If this column can be resize width</td>
				<td>optional, default = true</td>
			</tr>
			<tr>
				<td>render</td>
				<td>a function that return a JS or JQuery element to show in cells.</td>
				<td>optional.<a href="">demo</a></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>
					1. r: record object<br/>
					2. tr: row element<br/>
					3. gd: grid element<br/>
				</td>
				<td>&nbsp;</td>
			</tr>
		</table>
	</p>
	<h3><a href="#">loader</a></h3>
	<p>
		<ul>
			<li>url: URL, data provider</li>
			<li>params: load params, eg: { pageNo: 1, pageSize: 20 }</li>
			<li>autoLoad: whether auto load data when current page ready. default = true</li>
		</ul>
	</p>
	<h3><a href="#">pagerLength</a></h3>
	<p>
		how many page numbers will show in the page bar. optional.
		but, if you do not assign this value, the page bar will be hidden. 
	</p>
</div>
<div id="events">
	<h3><a href="#">afterLoad(dd, [po])</a></h3>
	<p>
		This event will be trigged since data be loaded to grid.
		<ul>
			<li>dd: direct grid data array.<a href="">demo</a></li>
			<li>po: full grid data object with pagenation. <a href="">demo</a></li>
		</ul>
	</p>
</div>
<div id="methods">
	<h3><a href="#">sort([el])</a></h3>
	<p>
		Sort by current sorter elements or assigned sorter element.
		<ul>
			<li>el: sorter element, optional, usually not use</li>
		</ul>
	</p>
	<h3><a href="#">adjust([vp])</a></h3>
	<p>
		Manually fit the grid to the container of it or just fit to itself.
		<ul>
			<li>vp: container(viewPort) of it, optional</li>
		</ul>
	</p>
	<h3><a href="#">newRow(r, [k])</a></h3>
	<p>
		Create a new row but do not append it to grid.<br/>
		Return element(tr) of new row.
		<ul>
			<li>r: data object of this row</li>
			<li>k: manually assigne the key of row. It must be passed when option "key" is not set.</li>
		</ul>
		Here is an <a href="/javascript/grid/index.php?code=exp">demo</a>.
	</p>
	<h3><a href="#">addRow(r, [k])</a></h3>
	<p>
		Create and append a new row to grid.<br/>
		Same param with <a href="#methods.newRow">"newRow"</a> method.
	</p>
	<h3><a href="#">loadData(data, [po])</a></h3>
	<p>
		Load data to grid from local memory.
		<ul>
			<li>dd: direct grid data array.<a href="">demo</a></li>
			<li>po: full grid data object with pagenation. this param will be passed to <a href="#events.afterLoad">afterLoad</a> event.<a href="">demo</a></li>
		</ul>
	</p>
	<h3><a href="#">load([pm])</a></h3>
	<p>
		Load data to grid from remote url(option loadUrl).
		<ul>
			<li>pm: params for load. eg: { name: 'tom' }</li>
		</ul>
	</p>
	<h3><a href="#">lockCols(cs)</a></h3>
	<p>
		Freeze first one or seriate more columns from left.
		<ul>
			<li>cs: name array of columns, eg: ['code','name']</li>
		</ul>
	</p>
</div><iframe src="/javascript/related.php" class="related"></iframe>
<div class="clear" style="height: 8px;"></div>
<div style="text-align: right;">
	Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
	QQ: 7213571&nbsp;&nbsp;MSN: pyh_jerry@163.com&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!--
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24473339-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
	&nbsp;&nbsp;
</div></body>
</html>
